<script setup>
import {reactive, ref} from "vue";
  import taskApi from "@/api/taskApi.js";
import {ElMessage, ElMessageBox} from "element-plus";

  let tableData = ref([])
  loadTask()
  function loadTask(){
    taskApi.get().then(resp=>{
      if (resp.code===200){
        tableData.value=resp.data
      }
    })
  }
  let dialogFormVisible = ref(false)
  let editTask = reactive({})
  function showEdit(row){
    dialogFormVisible.value = true
    editTask = row
  }
  /*编辑*/
  function edit(){
    taskApi.edit(editTask).then(resp=>{
      if (resp.code===200){
        ElMessage.success("编辑成功")
        dialogFormVisible.value = false
        loadTask()
      }else{
        ElMessage.error(resp.msg)
        loadTask()
      }
    }).catch(()=>ElMessage.error("请求异常"))
  }
  /*删除*/
  function del(task){
    ElMessageBox.confirm(
        "确定要删除吗",
        "警告",{
          confirmButtonText:"确定",
          cancelButtonText:"取消"
        }
    ).then(()=>{
      taskApi.delete(task).then(resp=>{
        if(resp.data===200){
          ElMessage.success("任务已删除")
          loadTask()
        }else{
          ElMessage.error(resp.msg)
          loadTask()
        }
      }).catch(()=>ElMessage.error("请求异常"))
    })
  }
  /*重启*/
  function resume(task){
    taskApi.resume(task).then(resp=>{
      if (resp.code===200){
        ElMessage.success("重启成功")
        loadTask()
      }else{
        ElMessage.error(resp.msg)
        loadTask()
      }
    }).catch(()=>ElMessage.error("请求异常"))
  }
  /*暂停*/
  function pause(task){
    taskApi.pause(task).then(resp=>{
      if (resp.code===200){
        ElMessage.success("暂停成功")
        loadTask()
      }else{
        ElMessage.error(resp.msg)
        loadTask()
      }
    }).catch(()=>ElMessage.error("请求异常"))
  }
  /*添加*/
  let addTask = reactive({})
  let dialogFormVisible2 = ref(false)
  function add(){
    taskApi.add(addTask).then(resp=>{
      console.log(resp)
      if (resp.code===200){
        ElMessage.success("添加成功")
        dialogFormVisible2.value = false
        addTask = reactive({})
        loadTask()
      }else{
        ElMessage.error(resp.msg)
        dialogFormVisible2.value = false
        addTask = reactive({})
        loadTask()
      }
    }).catch(()=>ElMessage.error("请求异常"))
  }
</script>
<template>
  <div class="content">
    <el-button type="success" @click="dialogFormVisible2=true">添加任务</el-button>
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="序号" width="120" type="index" align="center">
    </el-table-column>
    <el-table-column label="任务名称" width="220" property="name">
    </el-table-column>
    <el-table-column label="分组" width="120" property="group">
    </el-table-column>
    <el-table-column label="状态" width="120" property="state">
    </el-table-column>
    <el-table-column label="cron表达式" width="180" property="cronExpression">
    </el-table-column>
    <el-table-column label="备注" width="180" property="description">
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" plain @click="showEdit(scope.row)">编辑</el-button>
        <el-button type="danger" plain @click="del(scope.row)">删除</el-button>
        <el-button v-if="scope.row.state==='PAUSED'" type="default" plain @click="resume(scope.row)" >重启</el-button>
        <el-button v-if="scope.row.state==='NORMAL'" type="default" plain @click="pause(scope.row)" >暂停</el-button>
      </template>
    </el-table-column>
  </el-table>
<!-- 添加 -->
  <el-dialog v-model="dialogFormVisible2" title="添加" width="500">
    <el-form :model="addTask" label-position="right" label-width="100px">
      <el-form-item label="任务名称" :label-width="formLabelWidth">
        <el-input v-model="addTask.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="分组" :label-width="formLabelWidth">
        <el-input v-model="addTask.group"></el-input>
      </el-form-item>
      <el-form-item label="cron表达式" :label-width="formLabelWidth">
        <el-input v-model="addTask.cronExpression"></el-input>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="addTask.description"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false;addTask=reactive({})">取消</el-button>
        <el-button type="primary" @click="add">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>
<!-- 编辑 -->
  <el-dialog v-model="dialogFormVisible" title="编辑" width="500">
    <el-form :model="editTask" label-position="right" label-width="100px">
      <el-form-item label="任务名称" :label-width="formLabelWidth">
        <el-input v-model="editTask.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="分组" :label-width="formLabelWidth">
        <el-input v-model="editTask.group"></el-input>
      </el-form-item>
      <el-form-item label="cron表达式" :label-width="formLabelWidth">
        <el-input v-model="editTask.cronExpression"></el-input>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="editTask.description"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="edit">
          编辑
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.el-form {
  width: 100%;
}

.el-form-item {
  margin-bottom: 20px;
}

:deep(.el-form-item__label) {
  text-align: right;
}
</style>